
#FreeWorkflowNewXXC {
    background-color: #fff;
    height: 96px;
    margin-bottom: 20px;
    //padding-right: 20px;


    #smartGuessPicBoxNew {

        overflow-x: scroll;
        white-space: nowrap;
        display: inline-block;
        .outer-wrap-box.notFromMobile {
            .rectangle {
                margin: 20px 0;
                margin-right: 20px;
                &:nth-of-type(1){
                    margin-left: 20px;
                }
                .content-wrap {
                    .left-area {
                        i,img {
                            position: relative;
                            top: 22%;
                        }
                        i{
                            font-size: 14px;
                            top:32%;
                            &.icon-coms-Tile-o{
                                font-size: 12px;
                            }
                            &.icon-coms-organization-right{
                                font-size: 20px;
                                top:22%;
                            }
                        }
                    }
                }
            }
        }
        .outer-wrap-box {
            font-size: 12px;
            .rectangle {
                position: relative;
                //width: 118px;
                height: 46px;
                background-color: #fff;
                border-radius: 8px;
                display: inline-block;
                &.current{
                    border: 1px solid rgb(243, 180, 116);
                    .left-area{
                        border-right: 1px solid #f3b474;
                        background-color: rgb(255, 232, 204);
                    }
                }
                &.haveviewed{
                    border: 1px solid rgb(103, 187, 226);
                    .left-area{
                        border-right: 1px solid rgb(103, 187, 226);
                        background-color: rgb(170, 226, 255);
                    }
                }
                &.notviewed{
                    border: 1px solid rgb(27, 209, 197);
                    .left-area{
                        border-right: 1px solid rgb(27, 209, 197);
                        background-color: rgb(152, 246, 239);
                    }
                }
                .area {
                    display: inline-block;
                    span {
                        display: block;
                    }
                }
                .content-wrap {
                    cursor: default;
                    position: relative;
                    width: 100%;
                    height: 100%;
                    .left-area {
                        float: left;
                        //position: absolute;
                        width: 20px;
                        height: 100%;
                        border-top-left-radius: 8px;
                        border-bottom-left-radius: 8px;
                        text-align: center;
                        i {
                            color: #fff;
                        }
                    }
                    .right-area {
                        //position: relative;
                        //top: 25%;
                        //margin-top: -50%;
                        //left: 30%;
                        height: 46px;
                        line-height: 46px;
                        padding: 0 20px;
                        .info-content {
                            span {
                                //width: 90px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
                        }
                    }
                    .right-area.loading-word {
                        left: 40%;
                        top: 44%;
                    }
                    .addNode,.deleteNode{
                        display: none;
                        cursor: pointer;
                        z-index: 9;
                        position: absolute;
                        top: 20%;
                        width: 20px;
                        height: 20px;
                        text-align: center;
                        line-height: 20px;
                        border-radius: 10px;
                        background-color: #2db7f5;
                        i{
                            color: #fff;
                        }
                    }
                    .deleteNode{
                        left: -10px;
                    }
                    .addNode{
                        //left: 105px;
                        right: -10px;
                    }
                    &:hover{
                        .addNode,.deleteNode{
                            display: inline-block;
                        }
                    }
                    .operators{
                        width: 50px;
                        word-break: break-all;
                        overflow: hidden;
                        position: absolute;
                        z-index: 10;
                        top: 0;
                        right: 0;
                    }
                }
                .select-node {
                    position: absolute;
                    bottom: -40px;
                    left: 0;
                    span {
                        display: block;
                    }
                    a {
                        display: inline-block;
                        border-bottom: 1px solid transparent;
                    }
                    .select-box {
                        position: absolute;
                        z-index: 4;
                        width: 100%;
                        background-color: #fff;
                        overflow: auto;
                        display: none;
                        left: 0;
                        top: 35px;
                        ul {
                            padding: 5px;
                            li {
                                padding: 10px;
                            }
                            li:hover {
                                background-color: #e6f7ff;
                                color: black;
                            }
                        }
                    }
                    .select-box.show-panel {
                        display: inline-block;
                        max-height: 150px;
                        .select-content {
                            li {
                                cursor: pointer
                            }
                        }
                    }
                }

                .select-node.isFromMobile {
                    position: absolute;
                    bottom: 22px;
                    left: 165px;
                    //width: 113px;
                }
                .check-others:hover {
                    color: #00a9ff;
                    border-bottom: 1px solid #00a9ff;
                }

            }
            .rectangle.unKnownNode {
                text-align: center;
                span {
                    display: inline-block;
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    background-color: #b2b2b2;
                    margin: 0 2px;
                    position: relative;
                    top: 20px;
                }
                background-color: #f4f4f4;
            }
            .arrow-box.notFromMobile{
                display: inline-block;
                position: relative;
                .line {
                    width: 75px;
                }
                .jiantou {
                    position: absolute;
                    top: -10px;
                    font-size: 21px;
                }
                .arrow-point-right {
                    i {
                        right: -6px;
                    }
                }
                .arrow-point-left {
                    i {
                        left: -5px;
                        transform: rotate(180deg);
                    }
                }

            }
            .arrow-box.isFromMobile {
                display: inline-block;
                position: relative;
                .line {
                    height: 75px;
                }
                .jiantou {
                    position: absolute;
                    top: -10px;
                    font-size: 21px;
                }
            }
            .arrow-last-box.notFromMobile {
                position: relative;
                .turn-arrow {
                    width: 26px;
                    height: 115px;
                    position: absolute;
                    border-radius: 4px;
                    i {
                        font-size: 21px;
                        position: absolute;
                        top: 101px;
                    }
                }
                .arrow-turn-left {
                    border-left: none !important;
                    i {
                        left: -6px;
                        transform: rotate(180deg);
                    }
                }
                .arrow-turn-right {
                    border-right: none !important;
                    right: 0px;
                    i {
                        left: 8px;
                    }
                }
            }
            .arrow-last-box.isFromMobile {
                height: 75px;
                border-right: none;
                .arrow-turn-down {
                    border-right: none !important;
                    position: relative;
                    height: 75px;
                    i {
                        font-size: 20px;
                        position: absolute;
                        bottom: -8px;
                        left: -11px;
                        transform: rotate(90deg);
                    }
                }
            }
        }
        .outer-wrap-box.wrap-box-flex-down {
            padding: 0;
        }
        .wrap-box-flex-left {
            .rectangle{
                //float: left;
            }
            .arrow-box.notFromMobile, .arrow-last-box.notFromMobile {
                float: left;
                top: 50px;
            }
        }
        .wrap-box-flex-right {
            position: relative;
            right: 42px;
            .rectangle{
                //float: right;
            }
            .arrow-box.notFromMobile, .arrow-last-box.notFromMobile {
                float: right;
                top: 50px;
            }
        }
        .wrap-box-flex-down {
            flex-direction: column;
        }
    }
}

.wf-req-freeWorkflowNew-operaters{
    .ant-popover-title{
        background-color: #5f5f5f;
        color: #fff;
    }
    .ant-popover-inner-content{
        div{
            span{
                margin-right: 10px;
            }
            line-height: 20px;
            .haveoperator{
                .head{
                    color: rgb(48, 182, 255);
                }
            }
            .nooperator{
                margin-bottom: 15px;
                .head{
                    color: rgb(109, 179, 65);
                }
            }
            .viewedoperator{
                margin-bottom: 15px;
                .head{
                    color: rgb(255, 121, 6);
                }
            }
        }
    }


}
